<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-font.css"/>
		<style type="text/css">
			.main{
				width: 100%;
				margin: 0.4em auto;
				padding: 0 1.5em;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				background-color: white;
			}
			.main>div{
				width: 50%;
				text-align: center;
				padding: 0.8em;
			}
			input{
				width: 100%;
				border: 0;
				text-align: center;
			}
			
			
			.mui-popover {
			    position: absolute;
			    z-index: 999;
			    display: none;
			    width: 80%;
			    left: 10%;
			    top: 50%;
				-webkit-transform: translateY(-50%);
			    transform: translateY(-50%);
			    -webkit-transition: opacity .3s;
			    transition: opacity .3s;
			    -webkit-transition-property: opacity;
			    transition-property: opacity;
			    -webkit-transform: none;
			    opacity: 0;
			    border-radius: 7px;
			    background-color: #f7f7f7;
			    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
			    box-shadow: 0 0 15px rgba(0,0,0,.1);
			}
			.mui-popover .mui-popover-arrow:after {
			    position: absolute;
			    top: 0px !important;
			    left: 0;
			    width: 1px !important;
			    height: 1px !important;
			    content: ' ';
			    -webkit-transform: rotate(45deg);
			    transform: rotate(45deg);
			    border-radius: 3px;
			    background: #f7f7f7;
			}
			.listdiv{
				width: 100%;
				overflow: hidden;
				overflow-y: auto;
				background-color: white;
				text-align: center;
				padding: 1em;
				margin: auto;
			}
			.padding05{
				padding: 0.5em;
			}
			.mainimg{
				margin: 0.5em;
			}
			
			
			.mui-badge{
				position: absolute;
			    top: 50%;
			    right: 15px;
			    -webkit-transform: translateY(-50%);
			    transform: translateY(-50%);
			    background-color: white;
			}
			*{
				font-size: 0.98em;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">会员管理</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="addhy">
		    	<img src="../../img/add.png"/>
		    </div>
		</header>
		<div class="mui-content">
		    <!--
            	作者：592176224@qq.com
            	时间：2019-04-09
            	描述：
            
		    <div class="main" id="listid">
		    	<div class="border-r border-b">
		    		会员类型
		    	</div>
		    	<div class="border-b">
		    		折扣
		    	</div>
		    </div>
		    -->
		    <div class="" id="poslist">
		    	
		    </div>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-01-17
            	描述：
         
		    <div class="footdiv">
		    <button type="button" class="mui-btn mui-btn-blue mui-btn-block">修改</button>
		    </div>
		       -->
		    <div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="mainimg">
			   			<div class="mui-input-row border-b">
			   			    <label>等级名称</label>
			   			    <input id="member_level" type="text" placeholder="输入等级名称">
			   			</div>
			   			<div class="mui-input-row ">
			   			    <label>折扣</label>
			   			    <input id="member_discount" type="number" placeholder="输入1-100正整数">
			   			</div>
		   			</div>
		   			<div class="">
				   	<button type="button" id="subbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
				   </div>
			   </div>
			   
			</div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var lf;
			(function(){
				var lcs = function(){}
				$.extend(lcs.prototype, {
					mlist:[],	//会员分类数组
					mid:0,		//会员卡id
					onReady:function(){
						var that = this;
						mui.init();
						mui.plusReady(function(){
							
						})
						
						//获取会员分类
						that.getmember_level();
						//监听修改
						$('#poslist').on('tap', '.mui-btn-yellow', function(event) {
							
							var elem = this;
							var id = $(elem).attr("data-id");
							mui.openWindow({
			                        url: 'add_membership_card.html?mid='+id,
			                        id: 'add_membership_card',
			                        show: {
			                            aniShow: 'zoom-fade-in',
			                            duration: 300
			                        },
			                        waiting: {
			                            autoShow: true
			                        }
			                });
							var li = elem.parentNode.parentNode;
							setTimeout(function() {
								mui.swipeoutClose(li);
							}, 0);
							
						});
						//监听删除
						$('#poslist').on('tap', '.mui-btn-red', function(event) {
							var elem = this;
							mui.confirm('确认删除该条记录？', '', ["取消","确定"], function(e) {
								if (e.index == 1) {
									var id = $(elem).attr("data-id");
									that.delmember(id)
								} else {
									var li = elem.parentNode.parentNode;
									setTimeout(function() {
										mui.swipeoutClose(li);
									}, 0);
								}
							});
						});
						
						
						//监听 + 添加按钮
 						g("addhy").addEventListener('tap',function(e){
 							 mui.openWindow({
			                        url: 'add_membership_card.html',
			                        id: 'add_membership_card',
			                        show: {
			                            aniShow: 'zoom-fade-in',
			                            duration: 300
			                        },
			                        waiting: {
			                            autoShow: true
			                        }
			                });
 							
 							/*g("member_level").value  = '';
							g("member_discount").value  = '';
							that.mid = 0;
		                	mui('#popover').popover('toggle',g("popover"));*/
		                	
		                })
 						
					},
					getmember_level:function(){
						var that = this;
						var data = {
							url:"/api/member_level/lst",
							data:{
								access_token:acctoken(),
							}
						}
						ajax(data,function(res){
							console.log(res);
							that.mlist = res.data.data;
							that.setpos(res.data.data);
						})
					},
					//设置会员分类list
					setpos:function(list){
						var str= '';
						if(list.length){
							str = '<ul class="mui-table-view">';
							list.forEach(function(item,index){
								str += '<li class="mui-table-view-cell">'+
									'<div class="mui-slider-right mui-disabled">'+
									'<a data-id="'+item.id+'" member_level="'+item.member_level+'" member_discount="'+item.member_discount+'" class="mui-btn mui-btn-yellow ">修改</a>'+
									'<a data-id="'+item.id+'" member_level="'+item.member_level+'" member_discount="'+item.member_discount+'" class="mui-btn mui-btn-red ">删除</a>'+
									'</div>'+
									'<div class="mui-slider-handle">'+
									'<div class="mui-table-cell">'+
									item.member_level+'</div>'+
									'<span class="mui-badge">折扣：'+item.member_discount+'</span>'+
									'</div></li>';
							})
							str +='</ul>';
								
						}else{
							str = '<div class="addposcss">请添加会员等级</div>'
						}
						g("poslist").innerHTML = str;
					},
					beditmember:function(id,str){
						var that = this;
						var btnArray = ["取消","确定"];
						mui.prompt('请输入'+str+'的折扣:','',btnArray,function(e){
							if(e.index == 1){
								console.log(e.value);
								var data = {
									url:"/api/member_level/bedit",
									data:{
										access_token:acctoken(),
										discount:[{"id":id,"member_discount":e.value}]
									}
								}
								ajax(data,function(res){
									that.getmember_level();
								})
							}
						})
					},
					delmember:function(id){
						var that = this;
						var data = {
							url:"/api/member_level/del",
							data:{
								access_token:acctoken(),
								level_id:id
							}
						}
						ajax(data,function(res){
							console.log(res);
							mui.toast(res.msg);
							that.getmember_level();
						})
					}
					
					
				});
				var l = new lcs();
				lf = l;
				l.onReady();
			})()
			
			function onshow(){
				console.log("刷新")
				lf.getmember_level();
			}
			
			
			
		</script>
	</body>

</html>